<template>
  <div class="container">
    <div class="p_rel">
      <div class="flex_js p_10_0">
        <div class="c_666 fw">升级</div>
      </div>
      <el-divider></el-divider>
      <div class="flex m_top20">
        <div style="width: 50%">
          <span class="m_right10">升级类型</span
          ><el-select
            style="width: 250px; margin-left: 10px"
            placeholder="请选择"
            @change="get_select_list_info"
            v-model="select_id"
          >
            <el-option
              v-for="(item, index) in select_list"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="flex" style="width: 50%">
          <div>升级价格</div>
          <el-input
            style="width: 250px; margin-left: 10px"
            placeholder="请输入"
          ></el-input>
        </div>
      </div>
      <div class="title">升级权益</div>
      <el-table :data="list" border style="text-align: center">
        <el-table-column
          type="index"
          label="序号"
          width="80px"
        ></el-table-column>
        <el-table-column label="xxx"></el-table-column>
        <el-table-column label="xxx"></el-table-column>
      </el-table>
      <div class="title">升级赠品</div>
      <el-table :data="project_list" style="text-align: center" border>
        <el-table-column
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column label="赠品信息" prop="name"></el-table-column>
        <el-table-column label="赠品数量" prop="giftQuantity">
        </el-table-column>
        <el-table-column label="计量方式">
          <template #default="scope: any">
            <div v-for="(item, index) in measurement_list" :key="index">
              <span v-if="item.dictCode == scope.row.type">{{
                item.dictValue
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="有限时长" prop="duration">
          <template #default="scope: any">
            <div>
              {{ scope.row.duration }}
              <span v-for="(item, index) in durctionTpye_list" :key="index"
                ><span v-if="scope.row.durationType == item.dictCode">{{
                  item.dictValue
                }}</span></span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 70px"></div>
      <el-button type="primary" class="submit" @click="">马上升级</el-button>
    </div>
    <div>
      <div style="height: 41px; line-height: 41px">升级需知</div>
      <div class="main">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        中华人民共和国成立以后，我国社会逐步实现了由新民主主义到社会主义的过渡。生产资料私有制的社会主义改造已经完成，人剥削人的制度已经消灭，社会主义制度已经确立。工人阶级领导的、以工农联盟为基础的人民民主专政，实质上即无产阶级专政，得到巩固和发展。中国人民和中国人民解放军战胜了帝国主义、霸权主义的侵略、破坏和武装挑衅，维护了国家的独立和安全，增强了国防。经济建设取得了重大的成就，独立的、比较完整的社会主义工业体系已经基本形成，农业生产显著提高。教育、科学、文化等事业有了很大的发展，社会主义思想教育取得了明显的成效。广大人民的生活有了较大的改善。
        中国新民主主义革命的胜利和社会主义事业的成就，是中国共产党领导中国各族人民，在马克思列宁主义、毛泽东思想的指引下，坚持真理，修正错误，战胜许多艰难险阻而取得的。我国将长期处于社会主义初级阶段。国家的根本任务是，沿着中国特色社会主义道路，集中力量进行社会主义现代化建设。中国各族人民将继续在中国共产党领导下，在马克思列宁主义、毛泽东思想、邓小平理论、“三个代表”重要思想、科学发展观、习近平新时代中国特色社会主义思想指引下，坚持人民民主专政，坚持社会主义道路，坚持改革开放，不断完善社会主义的各项制度，发展社会主义市场经济，发展社会主义民主，健全社会主义法治，贯彻新发展理念，自力更生，艰苦奋斗，逐步实现工业、农业、国防和科学技术的现代化，推动物质文明、政治文明、精神文明、社会文明、生态文明协调发展，把我国建设成为富强民主文明和谐美丽的社会主义现代化强国，实现中华民族伟大复兴。
        在我国，剥削阶级作为阶级已经消灭，但是阶级斗争还将在一定范围内长期存在。中国人民对敌视和破坏我国社会主义制度的国内外的敌对势力和敌对分子，必须进行斗争。
      </div>
      <div class="checkbox">
        <el-checkbox>本人已全面了解并同意以上约定</el-checkbox>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { check_role, dictData } from '@/utils/utils' // 权限校验
import search from '@/view/components/search.vue'
import dialog_box from '@/view/components/dialog_box.vue'
import table_edit from '@/view/components/table_edit.vue'
import setTable from '@/view/components/setTable.vue'
import SvgButton from '@/components/svg_button.vue'
import { onMounted, ref, onUnmounted, nextTick } from 'vue'
import { FormInstance, ElMessage } from 'element-plus'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import EventBus from '@/utils/EventBus'
import { useStore } from 'vuex'

const header_list = ref([])
const height_size = ref()
const select_id = ref()
const select_list = ref()
const list = ref()
const project_list = ref()

const durctionTpye_list = ref()

const measurement_list = ref()
onMounted(() => {
  get_list()
  get_project_list()
  dictData('1514912374253948929').then((res) => {
    durctionTpye_list.value = res as any
  }) // 获取字典值 // 时长类型
  dictData('1511538556160180226').then((res) => {
    measurement_list.value = res as any
  }) // 获取字典值 // 计量方式
})
const get_list = () => {
  axios
    .request({
      url: serviceApi.upgradePackage_list,
      method: 'post',
      data: { current: 1, pageSize: 10, status: 2 },
    })
    .then((res) => {
      console.log(res)
      select_list.value = res.data.content
    })
}
const get_project_list = () => {
  axios
    .request({
      url: serviceApi.project_list,
      method: 'post',
    })
    .then((res) => {
      project_list.value = res.data
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const get_select_list_info = (e) => {
  console.log(e)
  axios
    .request({ url: serviceApi.upgradePackage_curd + '/' + e, method: 'get' })
    .then((res) => {
      console.log(res)
      for (let i in res.data.upgradePackageItemList) {
        project_list.value.forEach((element) => {
          if (res.data.upgradePackageItemList[i].itemId == element.id) {
            element.giftQuantity =
              res.data.upgradePackageItemList[i].giftQuantity
            element.duration = res.data.upgradePackageItemList[i].duration
            element.durationType =
              res.data.upgradePackageItemList[i].durationType
          }
        })
      }
      console.log(project_list.value)
    })
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  > div {
    height: 100%;
    width: 47.5%;
    background-color: #fff;
    padding: 0 1%;
  }
  > div:last-child {
    display: flex;
    flex-direction: column;
    position: relative;
    .main {
      flex: 1;
      height: 100%;
      overflow-y: scroll;
      margin-bottom: 10px;
      padding-bottom: 50px;
      padding: 10px 10px 60px 10px;
      text-align: justify;
      line-height: 28px;
      border: 1px solid #e8eaed;
    }
    .checkbox {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      text-align: center;
    }
  }
}
.title {
  border-left: 4px solid #3580eb;
  padding-left: 6px;
  height: 14px;
  line-height: 14px;
  margin: 30px 0 10px 0;
}
.submit {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 220px;
  font-size: 16px;
}
</style>
